<template>
    <div class="contioner">
        <div class="search-form divClass" v-show="headerShow">
            <a-form size="small" :model="query" layout="inline">
                <CorporateSectorCascader :configCascader="configCascader" @changeCascader="changeCascader" />
            </a-form>
            <div class="my-tool-bar" style="margin-bottom: 5px">
                <a-space>
                    <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
                    <el-button @click="addList">保存</el-button>
                </a-space>
            </div>
        </div>
        <div class="my-divisders">
            <a-divider orientation="center">
                <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
            </a-divider>
        </div>

        <div style="background-color: #f0f2f5; height: 10px"></div>
        <div :style="{ height: '89%', padding: '10px', display: 'flex' }">
            <el-calendar ref="calendar" v-model="dateObj">
                <template #header="{ date }">
                    <span>{{ date }}</span>
                    <el-button-group>
                        <el-button size="small" @click="selectDate('prev-month')">
                            上月
                        </el-button>
                        <el-button size="small" @click="selectDate('today')">当天</el-button>
                        <el-button size="small" @click="selectDate('next-month')">
                            下月
                        </el-button>
                    </el-button-group>
                </template>
                <template #date-cell="{ data }">
                    <p :class="data.isSelected ? 'is-selected' : ''">
                        {{ data.day.split('-').slice(1).join('-') }}
                        {{ data.isSelected ? '✔️' : '' }}
                        <a-space v-if="data.day <= getLastDayend(dateObj) && data.day >= getLastDayStart(dateObj)"
                            style="margin-top: 10px;display: block;">
                            <a-checkbox-group v-model="shiftList[data.day]" :default-value="getDefaultShift(data.day)">
                                <a-checkbox :value="'0'">白班</a-checkbox>
                                <a-checkbox :value="'1'">晚班</a-checkbox>
                            </a-checkbox-group>
                        </a-space>
                    </p>
                </template>
            </el-calendar>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Message } from '@arco-design/web-vue'
import { ref, reactive, onMounted, watch } from 'vue'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
// 引入element提示
//引入封装post
import { post } from '@/api/http'
import { Search, EditPen } from '@element-plus/icons-vue'
import moment from 'moment'
const headerShow = ref<boolean>(true)

const calendar = ref()
const selectDate = (val: string) => {
    calendar.value.selectDate(val)
    selectList()
}

const configCascader = ref<{}>({
    corporateWidth: '200px', //公司宽度
    corporateRquired: true, //公司是否必填
    size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '厂区', //公司label
    cascaderShow: 'sector', //配置部门不显示
})
const changeCascader = (data: any) => {
    const { corporateId, corporateLabel } = data
    query.firmId = corporateId
    query.firm = corporateLabel
}


//getlist初始化接口参数
let query: any = reactive({
    firmId: null,
    firm: '',
    shiftChecked: [],
})

const shiftList: any = reactive({})
const dateObj: any = ref(new Date())
function getLastDayStart(date: any) {
    var y: any = date.getFullYear(); //获取年份
    var m: any = date.getMonth() + 1; //获取月份
    var d: any = '01'
    m = m < 10 ? '0' + m : m; //月份补 0
    return [y, m, d].join("-")
}


function getLastDayend(date: any) {
    var y: any = date.getFullYear(); //获取年份
    var m: any = date.getMonth() + 1; //获取月份
    var d: any = new Date(y, m, 0).getDate(); //获取当月最后一日
    m = m < 10 ? '0' + m : m; //月份补 0
    d = d < 10 ? '0' + d : d; //日数补 0
    return [y, m, d].join("-")
}

function getDefaultShift(day: any) {
    const date = new Date(day);
    const dayOfWeek = date.getDay(); // 获取当前日期是星期几，0表示星期日，1表示星期一，依此类推
    if (dayOfWeek === 0) {
        return [];
    } else {
        return ['0', '1'];
    }
}

const dataObjList: any = ref()
const getList = () => {
    selectList()
}
function selectList() {
    post({
        url: '/org/calendar/getCalendarList',
        data: {
            "firmId": query.firmId, //公司ID
            "recordDate": moment(dateObj.value).format('YYYY-MM')
        }
    }).then((res: any) => {
        dataObjList.value = res.data
        if (res.code == 200) {
            res.data.forEach((v: any) => {
                if (!v.firm) {
                    shiftList[v.recordDate] = getDefaultShift(v.recordDate);
                } else {
                    shiftList[v.recordDate] = v.shiftList;
                }
            })
        } else {
            Message.warning('查询条件必填')
        }
    })
}

const addList = () => {
    if(!dataObjList.value){
        Message.warning('请先查询数据！')
        return
    }
    let objList = dataObjList.value.map((res: any) => {
        return {
            "id": res.id,
            "recordDate": res.recordDate,
            "firm": query.firm,
            "firmId": res.firmId,
            "shiftList": shiftList[res.recordDate] // 根据日期获取对应的班次信息
        }
    })
    post({
        url: '/org/calendar/saveCalendar',
        data: objList
    }).then((res: any) => {
        if (res.code == 200) {
            selectList()
            Message.success(res.message)
        } else {
            Message.warning(res.message)
        }
    })
}

</script>

<style lang="less" scoped>
.contioner {
    height: 100%;
    background: #fff;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.is-selected {
    color: #1989fa;
}

.bacClass {
    background-color: #fff !important;
    border: none !important;
}

:deep(.el-calendar-table) {
    width: 100%;
    height: 100%;

    &:not(.el-calendar-table__row) {

        td.next {
            pointer-events: none;
        }

        td.prev {
            pointer-events: none;
        }

        // td{
        //     pointer-events: none;
        // }
    }
}

:deep(.arco-checkbox-disabled .arco-checkbox-label) {
    color: black;
}
</style>